import { APITable } from "../../../components/APITable";

# `@stackflow/plugin-basic-ui`

Render the UI within the activity using the global stack state. It provides `cupertino` and `android` themes by default.

## Installation

```bash npm2yarn copy
npm install @stackflow/plugin-basic-ui
```

## Usage

Provides components in the form of application app bars.
```tsx showLineNumbers filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";

const { Stack, useFlow } = stackflow({
  // ...
  plugins: [
    // ...
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});
```
### `basicUIPlugin` Options
<APITable>
|      |      |      |
| ---- | ---- | ---- |
| theme | `cupertino` \| `android` | Set the theme. |
| rootClassName | `string`(optional) | Set the root class name. |
| appBar | `AppBar`(optional) | Set the app bar. |
</APITable>


```tsx filename="AppScreen" copy
import { AppScreen } from "@stackflow/plugin-basic-ui";

const Something = () => {
  return (
    <AppScreen appBar={{ title: "Home" }}>
      <div>Hello, World</div>
    </AppScreen>
  );
};
```

### `appBar`
<APITable>
|      |      |      |
| ---- | ---- | ---- |
| backButton | `{ renderIcon?: () => ReactNode; ariaLabel?: string }` \| `{ render?: () => ReactNode }` | Set the back button. |
| closeButton | `{ renderIcon?: () => ReactNode; ariaLabel?; string, onClick: (e) => void; }` \| `{ render?: () => ReactNode }` | Set the close button. |
</APITable>

It also provides modal and bottom sheet components.
```tsx filename="Modal" copy
import { Modal } from "@stackflow/plugin-basic-ui";

const Something = () => {
  return (
    <Modal>
      <div>Hello, World</div>
    </Modal>
  );
};
```

```tsx filename="BottomSheet" copy
import { BottomSheet } from "@stackflow/plugin-basic-ui";

const Something = () => {
  return (
    <BottomSheet>
      <div>Hello, World</div>
    </BottomSheet>
  );
};
```
